<template>
	<!-- #ifdef APP -->
	<scroll-view class="container" style="flex: 1">
	<!-- #endif -->
	<!-- #ifdef WEB -->
	<view class="web-container">
	<!-- #endif -->
		<!-- 欢迎横幅 -->
		<view class="welcome-banner">
			<view class="banner-content">
				<text class="welcome-title">ECG心电监测</text>
				<text class="welcome-subtitle">您的健康守护专家</text>
			</view>
			<view class="health-status">
				<view class="status-indicator" :class="healthStatus.level">
					<text class="status-icon">{{healthStatus.icon}}</text>
				</view>
				<text class="status-text">{{healthStatus.text}}</text>
			</view>
		</view>

		<!-- 快速监测卡片 -->
		<view class="card quick-monitor">
			<view class="quick-header">
				<text class="quick-title">快速监测</text>
				<text class="device-status">{{deviceStatus}}</text>
			</view>
			<view class="monitor-actions">
				<view class="monitor-button" @click="startQuickMonitor">
					<text class="monitor-icon">📈</text>
					<text class="monitor-text">开始监测</text>
				</view>
				<view class="monitor-button secondary" @click="viewRealTime">
					<text class="monitor-icon">👁️</text>
					<text class="monitor-text">实时查看</text>
				</view>
			</view>
		</view>

		<!-- 今日数据概览 -->
		<view class="card today-overview">
			<view class="overview-header">
				<text class="overview-title">今日概览</text>
				<text class="overview-date">{{todayDate}}</text>
			</view>
			<view class="metrics-row">
				<view class="metric-item" v-for="metric in todayMetrics" :key="metric.id">
					<text class="metric-icon">{{metric.icon}}</text>
					<text class="metric-value">{{metric.value}}</text>
					<text class="metric-label">{{metric.label}}</text>
				</view>
			</view>
		</view>

		<!-- 功能导航 -->
		<view class="feature-grid">
			<view class="feature-item" v-for="feature in features" :key="feature.id" @click="navigateToFeature(feature.path)">
				<view class="feature-icon-container">
					<text class="feature-icon">{{feature.icon}}</text>
				</view>
				<text class="feature-title">{{feature.title}}</text>
				<text class="feature-desc">{{feature.description}}</text>
			</view>
		</view>

		<!-- 最近记录 -->
		<view class="card recent-records">
			<view class="records-header">
				<text class="records-title">最近记录</text>
				<text class="view-all" @click="viewAllRecords">查看全部 ></text>
			</view>
			<view class="records-list">
				<view class="record-item" v-for="record in recentRecords" :key="record.id" @click="viewRecord(record)">
					<view class="record-icon">
						<text class="record-type-icon">{{record.typeIcon}}</text>
					</view>
					<view class="record-info">
						<text class="record-title">{{record.title}}</text>
						<text class="record-time">{{record.time}}</text>
					</view>
					<view class="record-value">
						<text class="record-result">{{record.result}}</text>
						<text class="record-unit">{{record.unit}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 健康提示 -->
		<view class="card health-tips" v-if="healthTip">
			<view class="tip-header">
				<text class="tip-title">💡 健康小贴士</text>
			</view>
			<text class="tip-content">{{healthTip}}</text>
		</view>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
	<!-- #ifdef WEB -->
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				// 健康状态
				healthStatus: {
					level: 'good',
					icon: '💚',
					text: '健康状态良好'
				},
				
				// 设备状态
				deviceStatus: '设备已连接',
				
				// 今日日期
				todayDate: '',
				
				// 今日指标
				todayMetrics: [
					{
						id: 1,
						icon: '💗',
						value: '72',
						label: '平均心率'
					},
					{
						id: 2,
						icon: '🩸',
						value: '98%',
						label: '血氧饱和度'
					},
					{
						id: 3,
						icon: '😴',
						value: '7.2h',
						label: '睡眠时长'
					},
					{
						id: 4,
						icon: '🏃',
						value: '6800',
						label: '步数'
					}
				],
				
				// 功能导航
				features: [
					{
						id: 1,
						icon: '📊',
						title: '实时监测',
						description: '24小时心电监测',
						path: '/pages/monitor/monitor'
					},
					{
						id: 2,
						icon: '📋',
						title: '健康报告',
						description: '详细数据分析',
						path: '/pages/report/report'
					},
					{
						id: 3,
						icon: '👤',
						title: '个人中心',
						description: '个人信息管理',
						path: '/pages/profile/profile'
					},
					{
						id: 4,
						icon: '⚙️',
						title: '设备设置',
						description: '连接与配置',
						path: '/pages/settings/settings'
					}
				],
				
				// 最近记录
				recentRecords: [
					{
						id: 1,
						typeIcon: '📈',
						title: '心电图检测',
						time: '2小时前',
						result: '正常',
						unit: ''
					},
					{
						id: 2,
						typeIcon: '🩸',
						title: '血氧检测',
						time: '4小时前',
						result: '98',
						unit: '%'
					},
					{
						id: 3,
						typeIcon: '💗',
						title: '心率检测',
						time: '6小时前',
						result: '72',
						unit: 'BPM'
					}
				],
				
				// 健康提示
				healthTip: '保持规律的作息时间有助于心血管健康，建议每天保证7-8小时的优质睡眠。'
			}
		},
		
		onLoad() {
			this.initPage()
		},
		
		onShow() {
			this.refreshData()
		},
		
		methods: {
			// 初始化页面
			initPage() {
				this.updateTodayDate()
				this.checkDeviceStatus()
			},
			
			// 更新今日日期
			updateTodayDate() {
				const now = new Date()
				const month = now.getMonth() + 1
				const day = now.getDate()
				this.todayDate = `${month}月${day}日`
			},
			
			// 检查设备状态
			checkDeviceStatus() {
				// 这里可以实际检查设备连接状态
				// 模拟设备状态
				this.deviceStatus = '设备已连接'
			},
			
			// 刷新数据
			refreshData() {
				// 刷新今日数据
				console.log('刷新数据')
			},
			
			// 开始快速监测
			startQuickMonitor() {
				uni.showLoading({
					title: '正在连接设备...'
				})
				
				// 模拟连接过程
				setTimeout(() => {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/monitor/monitor'
					})
				}, 1500)
			},
			
			// 查看实时监测
			viewRealTime() {
				uni.navigateTo({
					url: '/pages/monitor/monitor'
				})
			},
			
			// 导航到功能页面
			navigateToFeature(path) {
				if (path === '/pages/settings/settings') {
					uni.showToast({
						title: '设备设置功能开发中',
						icon: 'none'
					})
					return
				}
				
				uni.navigateTo({
					url: path
				})
			},
			
			// 查看所有记录
			viewAllRecords() {
				uni.navigateTo({
					url: '/pages/report/report'
				})
			},
			
			// 查看单条记录
			viewRecord(record) {
				uni.showToast({
					title: `查看${record.title}详情`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		padding: 12px;
	}

	/* #ifdef WEB */
	.web-container {
		background-color: #f5f5f5;
		padding: 20px;
		min-height: 100vh;
		max-width: 1200px;
		margin: 0 auto;
		overflow-y: auto;
	}
	/* #endif */

	.card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* 欢迎横幅 */
	.welcome-banner {
		background: linear-gradient(135deg, #007AFF, #00d4aa);
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 16px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.banner-content {
		display: flex;
		flex-direction: column;
	}

	.welcome-title {
		font-size: 20px;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 4px;
	}

	.welcome-subtitle {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
	}

	.health-status {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.status-indicator {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 4px;
	}

	.status-indicator.good {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.status-icon {
		font-size: 20px;
	}

	.status-text {
		font-size: 12px;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
	}

	/* 快速监测 */
	.quick-monitor {
		margin-bottom: 16px;
	}

	.quick-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.quick-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.device-status {
		font-size: 12px;
		color: #00d4aa;
	}

	.monitor-actions {
		display: flex;
		flex-direction: row;
		gap: 12px;
	}

	.monitor-button {
		flex: 1;
		height: 60px;
		background-color: #007AFF;
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.monitor-button.secondary {
		background-color: #f0f0f0;
	}

	.monitor-icon {
		font-size: 20px;
		margin-bottom: 4px;
	}

	.monitor-text {
		font-size: 14px;
		font-weight: 500;
	}

	.monitor-button .monitor-text {
		color: #ffffff;
	}

	.monitor-button.secondary .monitor-text {
		color: #333333;
	}

	/* 今日概览 */
	.today-overview {
		margin-bottom: 16px;
	}

	.overview-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.overview-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.overview-date {
		font-size: 14px;
		color: #666666;
	}

	.metrics-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.metric-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.metric-icon {
		font-size: 18px;
		margin-bottom: 6px;
	}

	.metric-value {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 2px;
	}

	.metric-label {
		font-size: 10px;
		color: #666666;
		text-align: center;
	}

	/* 功能导航 */
	.feature-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 16px;
	}

	.feature-item {
		width: calc(50% - 6px);
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin: 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.feature-icon-container {
		width: 48px;
		height: 48px;
		background-color: #f0f8ff;
		border-radius: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
	}

	.feature-icon {
		font-size: 20px;
	}

	.feature-title {
		font-size: 14px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 4px;
		text-align: center;
	}

	.feature-desc {
		font-size: 12px;
		color: #666666;
		text-align: center;
	}

	/* 最近记录 */
	.recent-records {
		margin-bottom: 16px;
	}

	.records-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.records-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.view-all {
		font-size: 14px;
		color: #007AFF;
	}

	.records-list {
		display: flex;
		flex-direction: column;
	}

	.record-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.record-item:last-child {
		border-bottom: none;
	}

	.record-icon {
		width: 32px;
		height: 32px;
		background-color: #f0f8ff;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.record-type-icon {
		font-size: 14px;
	}

	.record-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.record-title {
		font-size: 14px;
		color: #333333;
		margin-bottom: 2px;
	}

	.record-time {
		font-size: 12px;
		color: #666666;
	}

	.record-value {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.record-result {
		font-size: 14px;
		font-weight: 500;
		color: #007AFF;
	}

	.record-unit {
		font-size: 12px;
		color: #666666;
	}

	/* 健康提示 */
	.health-tips {
		border-left: 4px solid #00d4aa;
		margin-bottom: 16px;
	}

	.tip-header {
		margin-bottom: 8px;
	}

	.tip-title {
		font-size: 14px;
		font-weight: 600;
		color: #00d4aa;
	}

	.tip-content {
		font-size: 14px;
		color: #666666;
		line-height: 1.5;
	}

	/* Web平台适配 */
	/* #ifdef WEB */
	.monitor-button {
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.monitor-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.feature-item {
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.feature-item:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.record-item {
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.record-item:hover {
		background-color: #f8f9fa;
	}

	.view-all {
		cursor: pointer;
		transition: color 0.2s ease;
	}

	.view-all:hover {
		color: #0056b3;
	}
	/* #endif */

	/* Android状态栏适配 */
	/* #ifdef APP-ANDROID */
	.container {
		padding-top: 25px;
	}
	/* #endif */
</style> 